<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
  <title>文章详情</title>
  <link rel="stylesheet" href="./quill.css" />
  <link rel="stylesheet" href="./wxParse.css" />
  <link rel="stylesheet" href="./activity_info.css" />
</head>

<body>
  <div class="activityDetailPage">
    <!-- 图片 -->
    <div class="banner">
      <div class="img-box">
        <img id="image" src=''></img>
      </div>
      <div class="text-box">
        <img src='./icon_bottom.png'></img>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="media-box">
        <audio id="audio" src="" controls></audio>
      </div>
      <div class="media-box">
        <video id="video" src="" controls></video>
      </div>
      <div class="ql-editor" id="content"></div>
    </div>
  </div>
  <script src="./zepto.min.js"></script>
  <script type="text/javascript">
    $(() => {
      const id = GetQueryString('id') || 1;
      $.ajax({
        url: "https://hqrw.xiaocx.org/api/activity/articleinfo?id=" + id,
        success: (result) => {
          const { image, title, audio_url, sub_title, name, video_url, content, is_heng } = result;
          $('title').html(name);

          const imgClass = is_heng == 1 ? "banner-img-heng" : "banner-img";
          $("#image").attr("src", image);
          $("#image").addClass(imgClass);

          if (audio_url) {
            $('#audio').attr("src", audio_url);
          } else {
            $('#audio').hide();
          }

          if (video_url) {
            $('#video').attr("src", video_url);
          } else {
            $('#video').hide();
          }

          $('#content').html(content);

        }
      });
    });

    (function () {
      var currClientWidth,
        fontValue,
        originWidth;
      originWidth = 750;
      __resize();

      window.addEventListener('resize', __resize, false);

      function __resize() {
        currClientWidth = document.documentElement.clientWidth;
        if (currClientWidth > 768) {
          currClientWidth = 768;
        }
        if (currClientWidth < 320) {
          currClientWidth = 320;
        }
        fontValue = ((625 * currClientWidth) / originWidth).toFixed(2);
        document.documentElement.style.fontSize = fontValue + '%';
      }
    })();

    // 获取URL参数
    function GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]); return null;
    }
  </script>
</body>

</html>